<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>商品详情</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui-slide.css"/>
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>

    <style>
        body {
            font-size: 14px;
        }

        footer.aui-nav {
            z-index: 99999;
        }

        .haderTitle {
            width: 30%;
            margin: 0 auto;
        }

        header.aui-bar {
            background: #fff;
        }

        .aui-nav .aui-bar-tab .active .aui-iconfont, .aui-nav .aui-bar-tab .active p {
            color: #ff3333 !important;
        }

        .active {
            color: #ff3333 !important;
        }

        .aui-tab-nav li.active {
            color: #ff3333;
            border-bottom: 2px #ff3333 solid;
        }

        .aui-bar .aui-iconfont {
            color: #000;
        }

        header.aui-bar .aui-iconfont {
            position: absolute;
        }

        .aui-slide-page-active {
            background: #ff6b6b;
        }

        .proTitle {
            width: 85%;
            float: left;
            font-size: 12px;
            padding-right: 8px;
            padding-top: 2px;
        }

        .fenxiang {
            width: 15%;
            float: left;
            text-align: right;
            position: relative;
            display: table;
        }

        .fenxiang:before {
            content: "";
            position: absolute;
            left: 0;
            top: 10%;
            bottom: 0;
            height: 80%;
            width: 1px;
            background: #8f8f94;
        }

        .aui-list-view i.aui-iconfont {
            margin: 0;
        }

        .fenxiang, .fenxiang i.aui-iconfont {
            color: #000;
        }

        .price {
            color: #ff0005;
            font-size: 20px;
            font-weight: bold;
            margin-right: 8px;
        }

        .divPrice {
            font-size: 12px;
        }

        .kuaidi span {
            text-align: center;
        }

        .huise {
            color: #646464;
        }

        .ulTitle .aui-list-view-cell:after {
            border: none;
        }

        .ulTitle {
            padding-top: 10px;
        }

        .ulTitle .aui-list-view-cell {
            padding: 2px 10px;
        }

        .mt10 {
            margin-top: 10px;
        }

        .containTitle .aui-list-view {
            padding: 8px 0;
        }

        .aui-list-view:after {
            border-bottom: 1px solid #c8c7cc;
            border-top: 0;
        }

        .fz12 {
            font-size: 12px;
        }

        .ulGuige {
            padding-top: 0 !important;
        }

        .ulGuige li:first-of-type {
            height: 40px;
            line-height: 40px;
            margin-bottom: 8px;
        }

        .ulGuige li:first-of-type:after {
            border-bottom: 1px solid #c8c7cc;
        }

        .aui-badge {
            background: none;
        }

        .manyiStart .aui-iconfont {
            color: #ff1a1a !important;
            padding: 0 !important;
        }

        .aui-btn-outlined {
            border-color: #9c9c9c;
            color: #9c9c9c;
        }

        .aui-text-center .aui-btn-block {
            width: inherit;
            display: inline-block;
            padding: 10px 15px;
            border: 1px solid #9c9c9c;
            border-radius: 4px;
        }

        .shangla {
            text-align: center;
            position: relative;

        }

        .shangla:before {
            position: absolute;
            border-bottom: 1px solid #9c9c9c;
            top: 50%;
            content: "";
            left: 0;
            right: 0;
            z-index: 0;
        }

        .shangla span {
            display: inline-block;
            padding: 5px;
            background: #f3f3f3;
            z-index: 9;
            position: relative;

        }

        .gs-ul {
            padding: 0;
        }

        .gs-ul .aui-img-body {
            padding-top: 15px;
        }

        .xiangqin-img img {
            width: 100%;
        }

        /*商品规格上拉*/
        .guige {
            /*margin-bottom:60px;*/
        }

        .close-picker {
            position: absolute;
            right: 15px;
            top: 15px;
            z-index: 9999;
        }

        .guige .aui-img-body {
            padding-top: 15px;
        }

        .guige .guige-price {
            margin-top: 15px;
            color: #ff3333;
            font-weight: bold;
        }

        .guige .aui-list-view .aui-list-view-cell {
            padding: 12px 0;
        }

        .guige .aui-list-view .aui-img-object {
            max-width: 100px;
            height: 100px;
            line-height: 100px;
            border: 1px solid #ececec;
            padding: 3px;
        }

        .guigehuise {
            color: #d9d9d9;
        }

        .spanBefore {
            text-align: left;
        }

        .spanAfter {
            text-align: right;
        }

        .spanBefore:after {
            position: absolute;
            content: "";
            right: 5px;
            width: 1px;
            top: 10%;
            height: 80%;
            background: #d9d9d9;
        }

        .spanAfter:after {
            position: absolute;
            content: "";
            left: 5px;
            width: 1px;
            top: 10%;
            height: 80%;
            background: #d9d9d9;
        }

        .spanBefore, .spanAfter {
            width: 7%;
            position: relative;
        }

        .spanBefore, .spanAfter, .guige-color {
            float: left;
        }

        .divYanse {
            width: 86%;
            overflow: hidden;
            float: left;
            padding: 0 8px;
        }

        .yanse {
        }

        .guige-color {
            font-size: 12px;
            width: 100%;
        }

        .guige .aui-list-view {
            margin-bottom: 0;
        }

        .guige-color li {
            float: left;
            padding-right: 8px;
            height: 21px;
            line-height: 21px;
        }

        .shuxing {
            background: #fff;
            margin-bottom: 8px;
        }

        .shuxing li {
            line-height: 35px;
            overflow: hidden;
            padding: 8px 0;
        }

        .chicun {
            margin-right: 3%;
        }

        .kucun {
            margin-right: 3%;
        }

        .mui-numbox [class*=btn-numbox] {
            width: 25px;
        }

        .mui-numbox {
            padding: 0 26px;
            width: 85px;
        }

        .mui-numbox .mui-input-numbox {
            height: 33px;
        }

        .totalNum, .totalMoney {
            color: #ff3333;
        }

        .jiesuan {
            z-index: 999;
            width: 100%;
            background: #fff;
            /*display: none;*/
            position: absolute;
            bottom: 0;
        }

        li.total {
            padding: 15px 0;
            font-weight: 400;
            padding-right: 10px;
        }

        .picker-modal {
            height: 100%;
            overflow-y: auto;
        }

        .aui-nav {
            /*z-index: 99999;*/
        }

        .mark {
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 1;
        }

        .guige .aui-list-view li {
            padding0: 0;
        }

        #ask-reply-box {
            padding: 10px;
            position: absolute;
            right: 0;
        }

        #ask-reply-box > span {
            z-index: 2;
        }

        .gs-ul.aui-list-view {
            padding: 0;
        }

        #aui-footer {
            background: rgba(255, 255, 255, 1);
        }

        .footBtn {
            border-radius: 0;
            font-size: 12px;
            font-weight: 400;
        }

        .divShuxing {
            /*height: 0px;*/
            overflow-y: auto;
            position: fixed;
            z-index: 9999998;
            width: 100%;
            background: #fff;
            /*top:150px;*/
        }

        .divShuxing.show {
            -webkit-animation: showIn .5s ease both;
            animation: showIn .5s ease both;
        }

        .isShoucang {
            color: #e74c3c !important;
        }

        .goumai {
            display: none;
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 999;
            background: #fff;
        }

        .goumai .aui-btn {
            border-radius: 0;
        }

        .goumai li:nth-of-type(2) div:first-of-type {
            background: #f5cb49;
            border-color: #f5cb49;
            color: #fff;
        }

        #tabbar4 .aui-btn-warning {
            background: #f1c40f;
            border-color: #f1c40f;
            color: #fff;
        }

        .aui-btn-danger {
            background: #ff3333;
            border-color: #ff3333;
            color: #fff;
        }

        footer .aui-btn-block {
            line-height: 55px;
            height: 55px;
            padding: 0 !important;
            border-radius: 0;
        }

        .rzTitle {
            width: 25%;
            float: left;
            vertical-align: middle;
            height: 45px;
            line-height: 45px;
        }

        .rzInput {
            width: 75%;
            float: left;
            height: 45px;
            padding-left: 8px;
            display: table;
            padding: 11px 0;
        }

        .proAttr {
            /*padding:0 10px;*/
            height: 100%;
        }

        .proAttr .aui-list-view-cell {
            padding: 0;
        }

        .proAttr .aui-list-view {
            padding: 0 10px;
        }

        .proAttrTitle {
            padding: 15px 0;
            font-size: 16px;
        }

        .proAttrUl {
            position: absolute;
            bottom: 0;
            width: 100%;
        }

        a
        .proAttr {
            /*display: none;*/
        }

        .yanse .active {
            color: #ff3333;
        }

        /*下面弹出的样式*/
        .myPicker {
            position: fixed;
            bottom: 0;
            -webkit-transform: translateY(410px);
            height: 410px;
            overflow-y: auto;
            -webkit-transition: .5s;
            transition: .5s;
        }

        .pickAnimate {
            -webkit-transform: translateY(00px);
        }

        #wrapper {
            position: absolute;
            z-index: 1;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
        }

        #scroller {
            position: absolute;
            width: 100%;
        }

        .wrapper {
            position: absolute;
            z-index: 1;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
        }

        .scroller {
            position: absolute;
            width: 100%;
        }

        .divScroll {
            position: relative;
            height: 130px;
        }

        .aui-btn {
            border-radius: 0;
        }

        .noMargin {
            margin: 0;
        }
        header{
            position: fixed !important;
            top: 0;
            z-index: 999998;
        }
        footer.aui-nav{
            position: fixed;
            bottom: 0;
            z-index: 999998;
        }
        .containTitle{
            margin-top: 45px;
            margin-bottom: 60px;
            position: relative;
        }
    </style>
</head>
<body>
<header class="aui-bar aui-bar-nav aui-border-b">
    <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
    <ul class="aui-tab-nav aui-border-t haderTitle">
        <li class="active" data-type="1" tapmode onclick="changeCheck(this)">
            商品
        </li>
        <li data-type="2" tapmode onclick="changeCheck(this)">
            详情
        </li>
    </ul>
</header>
<div class="containTitle">
    <div class="slide">
        <div id="aui-slide">
            <div class="aui-slide-wrap">
                <div class="aui-slide-node ">
                    <img src="../image/tese.jpg"/>
                </div>
                <div class="aui-slide-node ">
                    <img src="../image/tese.jpg"/>
                </div>
                <div class="aui-slide-node ">
                    <img src="../image/tese.jpg"/>
                </div>
            </div>
            <div class="aui-slide-page-wrap"><!--分页容器--></div>
        </div>
    </div>
    <ul class="aui-list-view ulTitle">
        <li class="aui-list-view-cell">
            <div class="proTitle aui-ellipsis-2">六层蘑菇婴儿毛巾浴巾六层蘑菇婴儿毛巾浴巾六层浴巾六层蘑菇婴儿毛巾浴巾六层蘑菇婴儿毛巾浴巾</div>
            <div class="fenxiang">
                <i class="aui-iconfont aui-icon-share"></i>
                <p>分享</p>
            </div>
        </li>
        <li class="aui-list-view-cell">
            <div class="divPrice huise"><span class="price">¥25.00</span>200条起批</div>
        </li>
        <li class="aui-list-view-cell kuaidi huise">
            <span class="aui-col-xs-4">已成交3002条</span>
            <span class="aui-col-xs-4">快递:￥8</span>
            <span class="aui-col-xs-4">发货地:广东仓</span>
        </li>
    </ul>
    <ul class="aui-list-view ulTitle" data-type="3" tapmode onclick="showReply(this)">
        <li class="aui-list-view-cell">
            <div class="aui-arrow-right aui-ellipsis-1 huise">
                规格选择
            </div>
        </li>
    </ul>
    <ul class="aui-list-view ulGuige ulTitle huise">
        <li class="aui-list-view-cell" data-type="4" tapmode onclick="showReply(this)">
            <div class="aui-arrow-right aui-ellipsis-1 huise">
                产品属性
            </div>
        </li>
        <li class="aui-list-view-cell">
            <span class="aui-col-xs-4">品质标准</span>
            <span class="aui-col-xs-8">中国国家标准（GB）</span>
        </li>
        <li class="aui-list-view-cell">
            <span class="aui-col-xs-4">品名</span>
            <span class="aui-col-xs-8">牛津布  </span>
        </li>
        <li class="aui-list-view-cell">
            <span class="aui-col-xs-4">成分及含量</span>
            <span class="aui-col-xs-8">100%涤纶</span>
        </li>
    </ul>
    <ul class="aui-list-view ulTitle">
        <li class="aui-list-view-cell">
            <div class="aui-arrow-right aui-ellipsis-1 huise">
                优惠信息<span class="aui-badge huise">全店满100条可混批采购</span>
            </div>
        </li>
    </ul>
    <ul class="aui-list-view pinglun ulGuige  ulTitle ">
        <li class="aui-list-view-cell" tapmode onclick="openToTwo('proComments_win')">
            <div class="aui-arrow-right aui-ellipsis-1 ">
                买家评论
            </div>
        </li>
        <li class="aui-list-view-cell">
            <span class="aui-col-xs-4">商品满意度</span>
            <span class="aui-col-xs-8 manyiStart">
                    <i class="aui-iconfont aui-icon-favorfill"></i>
                    <i class="aui-iconfont aui-icon-favorfill"></i>
                    <i class="aui-iconfont aui-icon-favorfill"></i>
                    <i class="aui-iconfont aui-icon-favorfill"></i>
                    <i class="aui-iconfont aui-icon-favorfill"></i>
                </span>
        </li>
        <li class="aui-list-view-cell">
                <span class="aui-col-xs-12">
                    R**E:这次先买了一些打版，品质各方面都算过关，价格可以接受，一仔细看，这家很多商品花型款式都有，最主要的是大部分有现货，拍下的当天就可以发货，效率性大大的提高，等公司主管确认了就来大货，满意
                </span>
        </li>
        <li class="aui-list-view-cell huise">
            <span class="aui-col-xs-12">颜色:粉红色|颜色:紫色|颜色:黑色</span>
        </li>
        <li class="aui-text-center">
            <div class="  aui-btn-block aui-btn-outlined fz12 mt10 " tapmode onclick="openToTwo('proComments_win')">
                查看全部评论
            </div>
        </li>
    </ul>

    <ul class="aui-list-view gs-ul">
        <li class="aui-list-view-cell aui-img">
            <img class="aui-img-object aui-pull-left" src="../image/dongtai.jpg">
            <div class="aui-img-body aui-arrow-right">
                卖家:Aileen纱纺有限公司
                <p>2年</p>
            </div>
        </li>
    </ul>

    <div class="shangla">
        <span>继续上拉查看图文详情</span>
    </div>
    <div class="xiangqin-img">
        <img src="../image/xiangqing.jpg" alt="">
        <img src="../image/xiangqing2.jpg" alt="">
    </div>
    <div class="divShuxing myPicker">
        <div id="ask-reply-box">
            <span class="aui-iconfont aui-icon-roundclose aui-pull-right" tapmode onclick="hidePicker()"></span>
        </div>
        <!-- 产品的规格选择 -->
        <div class=" guige ">
            <!-- <i class="aui-iconfont aui-icon-close close-picker" data-picker=".picker-1"></i> -->
            <div class="aui-content-padded">
                <ul class="aui-list-view">
                    <li class="aui-list-view-cell aui-img">
                        <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="aui-ellipsis-2">
                                婴儿毛巾浴巾六层蘑菇童被纯棉纱布毛巾被蘑菇吸水毛巾被45棉纱布毛巾被蘑菇吸
                            </div>
                            <p class="guige-price">￥3.5-￥25</p>
                        </div>
                    </li>
                    <li class="aui-list-view-cell aui-img">
                            <span class="spanBefore aui-iconfont aui-icon-left guigehuise" tapmode
                                  onclick="myScroll.prev();">

                            </span>
                        <div class="divYanse" id="yanse">
                            <div class="yanse">
                                <ul class="guige-color">
                                    <li class="active">蘑菇白色</li>
                                    <li>蘑菇白色1</li>
                                    <li>蘑菇白色2</li>
                                    <li>蘑菇白色3</li>
                                    <li>蘑菇白色4</li>
                                    <li>蘑菇白色5</li>
                                    <li>蘑菇白色6</li>
                                    <li>蘑菇白色7</li>
                                    <li>蘑菇白色8</li>
                                    <li>蘑菇白色9</li>
                                </ul>
                            </div>
                        </div>
                        <span class="spanAfter aui-iconfont aui-icon-right guigehuise" tapmode
                              onclick="myScroll.next();"></span>
                    </li>
                </ul>
                <div class="divScroll">
                    <div id="wrapper">
                        <div id="scroller">


                            <ul class="shuxing">
                                <li class="aui-border-b">
                                    <div class="chicun  aui-pull-left">10*15cm</div>
                                    <div class="danjia  aui-pull-left">单价:￥3.5</div>
                                    <div class="mui-numbox  aui-pull-right" data-numbox-min='0' data-numbox-max='9'>
                                        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                                        <input id="test" class="mui-input-numbox" type="number" value="5"/>
                                        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                                    </div>
                                    <div class="kucun aui-pull-right">
                                        <span>库存:2000</span>
                                    </div>
                                </li>

                                <li class="aui-border-b">
                                    <div class="chicun  aui-pull-left">10*15cm</div>
                                    <div class="danjia  aui-pull-left">单价:￥3.5</div>
                                    <div class="mui-numbox  aui-pull-right" data-numbox-min='0' data-numbox-max='9'>
                                        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                                        <input id="test" class="mui-input-numbox" type="number" value="5"/>
                                        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                                    </div>
                                    <div class="kucun aui-pull-right">
                                        <span>库存:2000</span>
                                    </div>
                                </li>
                                <li class="aui-border-b">
                                    <div class="chicun  aui-pull-left">10*15cm</div>
                                    <div class="danjia  aui-pull-left">单价:￥3.5</div>
                                    <div class="mui-numbox  aui-pull-right" data-numbox-min='0' data-numbox-max='9'>
                                        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                                        <input id="test" class="mui-input-numbox" type="number" value="5"/>
                                        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                                    </div>
                                    <div class="kucun aui-pull-right">
                                        <span>库存:2000</span>
                                    </div>
                                </li>
                                <li class="aui-border-b">
                                    <div class="chicun  aui-pull-left">10*15cm</div>
                                    <div class="danjia  aui-pull-left">单价:￥3.5</div>
                                    <div class="mui-numbox  aui-pull-right" data-numbox-min='0' data-numbox-max='9'>
                                        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                                        <input id="test" class="mui-input-numbox" type="number" value="5"/>
                                        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                                    </div>
                                    <div class="kucun aui-pull-right">
                                        <span>库存:2000</span>
                                    </div>
                                </li>
                                <li class="aui-border-b">
                                    <div class="chicun  aui-pull-left">10*15cm</div>
                                    <div class="danjia  aui-pull-left">单价:￥3.5</div>
                                    <div class="mui-numbox  aui-pull-right" data-numbox-min='0' data-numbox-max='9'>
                                        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                                        <input id="test" class="mui-input-numbox" type="number" value="5"/>
                                        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                                    </div>
                                    <div class="kucun aui-pull-right">
                                        <span>库存:2000</span>
                                    </div>
                                </li>
                                <li class="aui-border-b">
                                    <div class="chicun  aui-pull-left">10*15cm</div>
                                    <div class="danjia  aui-pull-left">单价:￥3.5</div>
                                    <div class="mui-numbox  aui-pull-right" data-numbox-min='0' data-numbox-max='9'>
                                        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                                        <input id="test" class="mui-input-numbox" type="number" value="5"/>
                                        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                                    </div>
                                    <div class="kucun aui-pull-right">
                                        <span>库存:2000</span>
                                    </div>
                                </li>
                                <li class="aui-border-b">
                                    <div class="chicun  aui-pull-left">10*15cm</div>
                                    <div class="danjia  aui-pull-left">单价:￥3.5</div>
                                    <div class="mui-numbox  aui-pull-right" data-numbox-min='0' data-numbox-max='9'>
                                        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                                        <input id="test" class="mui-input-numbox" type="number" value="5"/>
                                        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                                    </div>
                                    <div class="kucun aui-pull-right">
                                        <span>库存:2000</span>
                                    </div>
                                </li>
                                <li class="aui-border-b">
                                    <div class="chicun  aui-pull-left">10*15cm</div>
                                    <div class="danjia  aui-pull-left">单价:￥3.5</div>
                                    <div class="mui-numbox  aui-pull-right" data-numbox-min='0' data-numbox-max='9'>
                                        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                                        <input id="test" class="mui-input-numbox" type="number" value="5"/>
                                        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                                    </div>
                                    <div class="kucun aui-pull-right">
                                        <span>库存:2000</span>
                                    </div>
                                </li>
                                <li class="aui-border-b">
                                    <div class="chicun  aui-pull-left">10*15cm</div>
                                    <div class="danjia  aui-pull-left">单价:￥3.5</div>
                                    <div class="mui-numbox  aui-pull-right" data-numbox-min='0' data-numbox-max='9'>
                                        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                                        <input id="test" class="mui-input-numbox" type="number" value="5"/>
                                        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                                    </div>
                                    <div class="kucun aui-pull-right">
                                        <span>库存:2000</span>
                                    </div>
                                </li>
                                <li class="aui-border-b">
                                    <div class="chicun  aui-pull-left">10*15cm</div>
                                    <div class="danjia  aui-pull-left">单价:￥3.5</div>
                                    <div class="mui-numbox  aui-pull-right" data-numbox-min='0' data-numbox-max='9'>
                                        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                                        <input id="test" class="mui-input-numbox" type="number" value="5"/>
                                        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                                    </div>
                                    <div class="kucun aui-pull-right">
                                        <span>库存:2000</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <ul class="jiesuan">
                <li class="total aui-text-right aui-border-t">共<span class="totalNum">600</span>条 <span
                        class="totalMoney">￥1236.50</span></li>
                <li class=" ">
                    <div class="aui-btn aui-btn-danger aui-btn-block">确定</div>
                </li>
            </ul>
            <ul class="goumai">
                <li class="total aui-text-right  aui-border-t">共<span class="totalNum">600</span>条 <span
                        class="totalMoney">￥1236.50</span></li>
                <li class="aui-col-xs-6">
                    <div class="aui-btn aui-btn-danger aui-btn-block">加入进货单</div>
                </li>
                <li class="aui-col-xs-6">
                    <div class="aui-btn aui-btn-danger aui-btn-block">立即购买</div>
                </li>
            </ul>
        </div>
        <!-- 产品的属性查看 -->
        <div class="proAttr">
            <ul class="aui-list-view  plr10 noMargin">
                <li class="proAttrTitle aui-text-center aui-border-b">产品属性</li>
            </ul>
            <div style="position:relative;height: 300px;" class="aui-content-padded ">
                <div class="wrapper">
                    <div class="scroller">
                        <ul class=" plr10 ">
                            <li class="aui-list-view-cell">
                                <div class=" rzTitle">公司年限：</div>
                                <div class=" rzInput companyName">
                                    2年
                                </div>
                            </li>
                            <li class="aui-list-view-cell">
                                <div class=" rzTitle">企业认证：</div>
                                <div class=" moshi rzInput">
                                    通过企业身份认证
                                </div>
                            </li>
                            <li class="aui-list-view-cell">
                                <div class=" rzTitle">企业认证：</div>
                                <div class=" moshi rzInput">
                                    通过企业身份认证通过企业身份认证通过企业身份认证通过企业身份认证通过企业身份认证通过企业身份认证
                                </div>
                            </li>
                            <li class="aui-list-view-cell">
                                <div class=" rzTitle">企业认证：</div>
                                <div class=" moshi rzInput">
                                    通过企业身份认证通过企业身份认证通过企业身份认证通过企业身份认证通过企业身份认证通过企业身份认证
                                </div>
                            </li>
                            <li class="aui-list-view-cell">
                                <div class=" rzTitle">企业认证：</div>
                                <div class=" moshi rzInput">
                                    通过企业身份认证通过企业身份认证通过企业身份认证通过企业身份认证通过企业身份认证通过企业身份认证
                                </div>
                            </li>
                            <li class="aui-list-view-cell">
                                <div class=" rzTitle">企业认证：</div>
                                <div class=" moshi rzInput">
                                    通过企业身份认证通过企业身份认证通过企业身份认证通过企业身份认证通过企业身份认证通过企业身份认证
                                </div>
                            </li>
                            <li class="aui-list-view-cell">
                                <div class=" rzTitle">企业认证：</div>
                                <div class=" moshi rzInput">
                                    通过企业身份认证通过企业身份认证通过企业身份认证通过企业身份认证通过企业身份认证通过企业身份认证
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <ul class="proAttrUl">
                <li class="" tapmode onclick="hidePicker()">
                    <div class="aui-btn aui-btn-danger aui-btn-block">关闭</div>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- 产品属性上拉 -->
<footer class="aui-nav" id="aui-footer">
    <ul class="aui-bar-tab menuUl">
        <li id="tabbar1" tapmode onclick="openToTwo('../index')">
            <span class="aui-iconfont aui-icon-home"></span>
            <p>
                首页
            </p>
        </li>
        <li id="tabbar3" tapmode onclick="shoucang(this)">
            <span class="aui-iconfont aui-icon-favor"></span>
            <p>
                收藏
            </p>
        </li>
        <li id="tabbar4" data-type="3" tapmode onclick="showReply(this)">
            <a href="#" data-picker=".picker-1" class="open-picker">
                <div class="aui-btn aui-btn-warning aui-btn-block footBtn">加入进货单</div>
            </a>
        </li>
        <li id="tabbar5" data-type="3" tapmode onclick="showReply(this)">
            <div class="aui-btn aui-btn-danger aui-btn-block footBtn">立即订购</div>
        </li>
    </ul>
</footer>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../script/mui.min.js"></script>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<script type="text/javascript" src="../script/iscroll.js"></script>
<script src="../script/framework7.min.js"></script>

<script type="text/javascript">


    // mui遮罩
    var mask = mui.createMask(hideReply);

    $(function () {
        //颜色宽度
        $(".yanse").width(getWidth());
        // 颜色滚动的
        loadYanse();
        //区域滚动,商品的个数那些的
        var AttrScroll = new IScroll("#wrapper", {
            probeType: 3,
            mouseWheel: true,
            click: true
        });
        //属性区域滚动，弹出企业认证信息
        var AttrScroll2 = new IScroll(".wrapper", {
            probeType: 3,
            mouseWheel: true,
            click: true
        });
//        alert(myScroll.directionX);
    })
    var slide3 = new auiSlide({
        container: document.getElementById("aui-slide"),
        // "width":300,
        "height": 240,
        "speed": 500,
        "autoPlay": 3000, //自动播放
        "loop": true,
        "pageShow": true,
        "pageStyle": 'dot',
        'dotPosition': 'center'
    })
    var myScroll;
    // 颜色滚动的
    function loadYanse() {
        myScroll = new IScroll('#yanse', {
            scrollX: true,
            scrollY: false,
            mouseWheel: true,
            vScroll: false,
            click: true,
            snap:true,
            beforeScrollStart: function (e) {
                if (this.absDistX > (this.absDistY + 5 )) {
                    // user is scrolling the x axis, so prevent the browsers' native scrolling
                    e.preventDefault();
                }
            }
        });
    }
    // 计算颜色的宽度
    function getWidth() {
        var height = 0;
        $(".yanse").find("li").each(function () {
            height += $(this).outerWidth(true);
        })
        return height;
    }


    // 产品规格颜色选择

    $(document).on("click", ".guige-color li", function () {
        $(this).parent().find("li").removeClass("active");
        $(this).addClass("active")
    })
    function showReply(obj) {
        var dataType = $(obj).attr("data-type");
        showFooter(dataType);
        mask.show();
        $(".myPicker").addClass("pickAnimate");
        setBodyLayer()
    }

    function hidePicker() {
        hideReply()
        mask.close();
        hideReply();

    }
    function hideReply() {
        $(".myPicker").removeClass("pickAnimate");
        showMenu();
        noBodyLayer();
    }
    //处理底部的显示
    //1表示显示菜单，2表示规格选择（即单击商品规格）（更新成跟3一样），3表示购买和加入购货单,4表示属性查看
    function showFooter(type) {
        switch (type) {
            case '3':
                $(".menuUl").hide();
                $(".jiesuan").hide();
                $(".goumai").show();
                $(".proAttrUl").hide();
                //规格显示，属性隐藏
                $(".guige").show();
                $(".proAttr").hide();
                break;
            case '4':
                $(".menuUl").hide();
                $(".goumai").hide();
                $(".proAttrUl").show();
                //规格隐藏，属性显示
                $(".guige").hide();
                $(".proAttr").show();
                break;
        }
    }
    // 设置body让不滚动
    function setBodyLayer() {
        $('html').css({"height": "100%", "overflow": "hidden"});
        $('body').css({"height": "100%", "overflow": "hidden"});
    }
    // 取消设置body让不滚动
    function noBodyLayer() {
        $('html').css({"overflow": "auto"});
        $('body').css({"overflow": "auto"});
    }
    // 显示一开始的菜单
    function showMenu() {
        $(".menuUl").show();
        $(".goumai").hide();
        $("footer").height("55");
        $(".proAttrUl").hide();
    }
    function shoucang(obj) {
        $(obj).find("span").eq(0).addClass("isShoucang");
        $(obj).find("p").eq(0).text("已收藏");
        api.toast({
            msg: '收藏成功',
            duration: 2000,
            location: 'center'
        });
    }

    //为了在下面的热门类别可以通用，单独出来
    function changeCheck(obj) {
        $(obj).parent().find("li").removeClass("active");
        $(obj).addClass("active");
    }
    function showPick() {
        api.execScript({
            frameName: 'proInfo_frm',
            script: 'showPick()'
        })
    }
</script>
</html>
